<template>
  <a-form-model ref="form"  :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item :label="i18n('form.listSelect','列表选择')" prop="boList" >
      <rx-input-button width="80%"  @click="selectBoList" v-model="form.boList" ></rx-input-button>
    </a-form-model-item>
    <a-form-model-item :label="i18n('form.colMap','列映射')">
      <a-button-group class="addbutton">
        <button @click="add()"><i class="iconfont iconadd"></i></button>
        <button @click="remove()"><i class="iconfont icontrash"></i></button>
        <button @click="moveUp()"><i class="iconfont iconshang"></i></button>
        <button @click="moveDown()"><i class="iconfont iconxia"></i></button>
      </a-button-group>

      <a-table
        :columns="columns"
        :dataSource="form.fieldMap"
        :pagination="false"
        :bordered="true"
        :rowSelection="{selectedRowKeys: selectedRowKeys,type:'checkbox', onChange: onSelectChange}"
        rowKey="idx_"
        style="width: 91.5%;"
      >


        <template slot="destField" slot-scope="text, record, index"  >
          <a-select v-model="record.destField" :options="destFields" @change="changeDestField(record)"/>
        </template>

        <template slot="srcField" slot-scope="text, record, index"  >
          <a-select show-search option-filter-prop="children" :filter-option="filterOption"
                    @focus="fieldFocus(record)" @change="fieldChange($event,record)"
                    v-model="record.srcField" :options="srcFields"/>
        </template>

      </a-table>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
    import {GridMixin,Dialog} from "@lowcode/jpaas-common-lib";
    import FormBoListApi from '@/api/form/core/formBoList';


    export default {
      name: "renderConfig_list",
      props:["layerid","destroy"],
      mixins:[GridMixin],
      data(){
        return {
          labelCol: {span: 6},
          wrapperCol: {span: 18},
          idx_: 1,
          form: {
            boListId: "",
            name: "",
            alias: "",
            boList: "",
            fieldMap: [],

          },
          srcFields: [],
          destFields: [],
          selectedRowKeys: [],
          selectedRows: [],
          columns: [
            {
              title: this.i18n('form.targetField','目标字段'),
              dataIndex: 'destField',
              scopedSlots: {customRender: 'destField'},
            },
            {
              title: this.i18n('form.listField','当前列表字段'),
              dataIndex: 'srcField',
              scopedSlots: {customRender: 'srcField'}
            }
          ],
          rules: {
            boList: [
              {required: true, message: this.i18n('msa.listNeed','列表必填'), trigger: 'blur'},
            ],

          },
          curRecord: {}
        }
      },
      methods:{
          i18n(name,text,key){
              return this.$ti18(name,text,"formCellRender",key);
          },
        fieldFocus(record){
          this.curRecord=record;
        },
        filterOption(input, option) {
          this.curRecord['srcField']=input;
          this.curRecord['searchField']=input;
          return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
          );
        },
        fieldChange(value,record){
          if(record["searchField"] && value!=record["searchField"]){
            record["srcField"]=record["searchField"];
          }
        },
        validate(callback) {
            this.$refs.form.validate(valid => {
                if (valid) {
                    callback();
                }
            });
        },
        getData(){
            delete this.form.boList;
            var fieldMap=JSON.stringify(this.form.fieldMap) ;
            this.form.fieldMap=fieldMap;
            return this.form;
        },
        onSelectChange(selectedRowKeys, selectedRows){
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectedRows
        },
        add() {
            this.form.fieldMap.push({
                destField: "",
                srcField: "",
                idx_: this.idx_++
            })
        },
        remove(){
            this.removeRows(this.form.fieldMap,this.selectedRowKeys);
        },
        moveUp(){
            this.toUp(this.form.fieldMap,this.selectedRowKeys)
        },
        moveDown(){
            this.toDown(this.form.fieldMap,this.selectedRowKeys)
        },
        setData(data,fieldDts){
             this.srcFields=fieldDts;
             if(!data){
                 return;
             }

             this.form=Object.assign(this.form,data) ;
             var boListId= this.form.boListId;
             if(boListId){
                 FormBoListApi.get(boListId).then(res=>{
                     this.destFields= this.handSearchJson(res.data.searchJson);
                 });
             }

             var boListObj={text:data.name,value:data.alias};
             this.form.boList=JSON.stringify(boListObj);
             if(this.form.fieldMap){
                 this.form.fieldMap=JSON.parse(data.fieldMap);
                 var idxAry=[];
                 this.form.fieldMap.forEach(item=>{
                     idxAry.push(item.idx_);
                 });
                 this.idx_=Math.max.apply(null,idxAry)+1;
             }

        },
        handSearchJson(searchJson){
            var ary=JSON.parse(searchJson);
            var rtn=ary.filter(item=>{
                return item.type=='income';
            }).map(item=>{
                return {
                    key:item.fieldName,
                    label:item.fieldLabel,
                    fieldOp:item.fieldOp,
                    tablePre:item.tablePre,
                    dataType:item.dataType
                }});
            return rtn;
        },
        changeDestField(record){
          var destField=record.destField;
          var obj=  this.destFields.filter(item=>{
                return item.key==destField;
            })[0];
          Object.assign(record,obj);

        },
        selectBoList(){
            var conf= {
                    curVm: this,
                    data: {
                    single: true
                },
                widthHeight: ['1000px', '600px']
            };

            var self_=this;

            Dialog.openFormBoListDialog(conf,  (vm,data) => {
                var obj=data[0];

                var jsonObj={text:obj.name,value:obj.key};
                var json=JSON.stringify(jsonObj);
                self_.form.boList=json;
                self_.form.name=obj.name;
                self_.form.alias=obj.key;
                self_.form.boListId=obj.id;


                self_.destFields=self_.handSearchJson(obj.searchJson);
            })
        }
      }
    }
</script>

<style scoped>

</style>